<template>
  <div class="parent">
    <div class="child">
      <el-form :inline="true" :model="formCreate" class="demo-form-inline">
        <el-form-item label="关键词">
          <el-input v-model="formCreate.keyword" placeholder="文本中包含的关键词，不填则随机" clearable />
        </el-form-item>
        <el-form-item label="条数">
          <el-input v-model.number="formCreate.number" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onCreate">插入 msg1</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formDelete" class="demo-form-inline">
        <el-form-item label="会话 id">
          <el-input v-model="formDelete.sessionId" clearable />
        </el-form-item>
        <el-form-item label="时间起点">
          <el-input v-model.number="formDelete.timeStart" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时间终点">
          <el-input v-model.number="formDelete.timeEnd" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onBulkDelete">按时间批量删除 msg1</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formDelete" class="demo-form-inline">
        <el-form-item label="消息 idClient">
          <el-input v-model="formDelete.idClient" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onDelete">删除 msg1 的某一条</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formUpdate" class="demo-form-inline">
        <el-form-item label="消息 idClient">
          <el-input v-model="formUpdate.idClient" clearable />
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input v-model="formUpdate.text" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onUpdate">合并式修改 msg1 的某一条</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formRead" class="demo-form-inline">
        <el-form-item label="消息 idClient">
          <el-input v-model="formRead.idClient" clearable class="w400" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onRead">查 msg1 的某一条</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formRead" class="demo-form-inline">
        <el-form-item label="消息 idClient list">
          <el-input v-model="formRead.enums" clearable class="w400" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReadByIds">按 id 列表来查 msg1</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formRead" class="demo-form-inline">
        <el-form-item label="会话 id">
          <el-input v-model="formRead.sessionId" clearable />
        </el-form-item>
        <el-form-item label="时间起点">
          <el-input v-model.number="formRead.timeStart" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时间终点">
          <el-input v-model.number="formRead.timeEnd" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="过滤函数">
          <el-input v-model="formRead.filter" type="text" autocomplete="off" class="w400" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onBulkRead">按条件查 msg1</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { generateMessage } from '../controller/mock'

// 增加表单
const formCreate = reactive({
  keyword: '', // 关键字，不填则随机生成
  number: 1 // 条数
})

// 删除表单
const formDelete = reactive({
  idClient: '', // 要删除删除的id
  sessionId: 'p2p-cs2',
  timeStart: 0,
  timeEnd: 1601467200000
})

// 修改表单
const formUpdate = reactive({
  idClient: '',
  text: '这是一条修改后的内容'
})

// 查询表单
const formRead = reactive({
  idClient: '',
  sessionId: 'p2p-cs2',
  timeStart: 0,
  timeEnd: Date.now(),
  // keyword: '' // 关键字
  enums: [], // 若干 idClient 的枚举值
  filter: 'return function(item) { return true }'
})

const onCreate = async () => {
  const msgs = []
  console.time('create')
  for (let i = 0; i < formCreate.number; i++) {
    msgs.push(generateMessage(formCreate.keyword))
  }
  if (msgs.length > 1) {
    const failedList = await window.db.msg1.bulkCreate(msgs)
    console.log(`Create db data ${formCreate.number} success, affect row: ${formCreate.number - failedList.length}. `, failedList.length > 0 ? failedList : '')
  } else {
    await window.db.msg1.create(msgs[0])
    console.log(`Create db data ${formCreate.number} success, affect row: ${formCreate.number}`, msgs[0])
  }
  console.timeEnd('create')
}

const onBulkDelete = async () => {
  console.time('bulkDelete')
  const result = await window.db.msg1.bulkDelete({
    sessionId: formDelete.sessionId,
    timeStart: formDelete.timeStart,
    timeEnd: formDelete.timeEnd
  })
  console.log('bulkDelete success', result)
  console.timeEnd('bulkDelete')
}

const onDelete = async () => {
  console.time('delete')
  const reuslt = await window.db.msg1.delete(formDelete.idClient)
  console.log('delete success', reuslt)
  console.timeEnd('delete')
}

const onUpdate = async () => {
  console.time('update')
  const result = await window.db.msg1.update(formUpdate)
  console.log('update success', result)
  console.timeEnd('update')
}

const onRead = async () => {
  console.time('read')
  const result = await window.db.msg1.read(formRead.idClient)
  console.log('read success', result)
  console.timeEnd('read')
}

const onReadByIds = async () => {
  console.time('readByIds')
  const enums = typeof formRead.enums === 'string' ? JSON.parse(formRead.enums) : formRead.enums
  const result = await window.db.msg1.readByIds(enums)
  console.log('readByIds success', result)
  console.timeEnd('readByIds')
}

const onBulkRead = async () => {
  console.time('batchRead')
  const filter = typeof formRead.filter === 'string' ? new Function(formRead.filter)() : formRead.filter
  // const enums = typeof formRead.enums === 'string' ? JSON.stringify(formRead.enums) : formRead.enums
  const result = await window.db.msg1.bulkRead({
    ...formRead,
    // enums,
    filter
  })

  console.log('read success', result)
  console.timeEnd('batchRead')
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 1000px;
  text-align: right;
}

.demo-form-inline .w400 {
  width: 400px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
